/**
 * Created by YJH on 2018/5/24.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    ListView,
    RefreshControl,
} from 'react-native';
import Toast, {DURATION}from 'react-native-easy-toast';
import NavigationBarComponent from './NavigationBarComponent';
var data = {
    "result": [
        {
            "email": "qinshihuang@gmail.com",
            "fullName": "秦始皇"
        },
        {
            "email": "zhaogao@gmail.com",
            "fullName": "赵高"
        },
        {
            "email": "xaingyu@gmail.com",
            "fullName": "项羽"
        },
        {
            "email": "lisi@gmail.com",
            "fullName": "李斯"
        },
        {
            "email": "liubang@gmail.com",
            "fullName": "刘邦"
        },
        {
            "email": "zugeliang@gmail.com",
            "fullName": "诸葛亮"
        },
        {
            "email": "guanyu@gmail.com",
            "fullName": "关羽"
        },
        {
            "email": "xiaoming@gmail.com",
            "fullName": "小明"
        }, {
            "email": "qinshihuang@gmail.com",
            "fullName": "秦始皇"
        },
        {
            "email": "zhaogao@gmail.com",
            "fullName": "赵高"
        },
        {
            "email": "xaingyu@gmail.com",
            "fullName": "项羽"
        },
        {
            "email": "lisi@gmail.com",
            "fullName": "李斯"
        },
        {
            "email": "liubang@gmail.com",
            "fullName": "刘邦"
        },
        {
            "email": "zugeliang@gmail.com",
            "fullName": "诸葛亮"
        },
        {
            "email": "guanyu@gmail.com",
            "fullName": "关羽"
        },
        {
            "email": "xiaoming@gmail.com",
            "fullName": "小明"
        }
    ]
};

export default class ListviewTest extends Component<Props> {

    constructor(props) {
        super(props);
        const ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2
        });
        this.state = {
            dataSource: ds.cloneWithRows(data.result),
            isLoading: true,
        }

        this.onLoad();
    }

    renderRow(item) {
        return <View style={styles.item_row}>
            <TouchableOpacity onPress={() => {
                this.toast.show(item.fullName, DURATION.LENGTH_SHORT)
            }}>
                <Text style={styles.item_text}>
                    {item.email}
                </Text>
                <Text style={styles.item_text}>
                    {item.fullName}
                </Text>
            </TouchableOpacity>
        </View>
    }

    renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
        return <View style={styles.item_line}>
        </View>
    }

    renderFooter() {
        return <View >
            <Image style={styles.item_image} source={require('../../res/images/ic_trending.png')}/>
        </View>
    }

    onLoad() {
        setTimeout(() => {
            this.setState({
                isLoading: false,
            })
        }, 2000);
    }

    render() {
        return (
            <View style={styles.container}>
                <NavigationBarComponent
                    title={'ListView'}
                    style={{backgroundColor: 'green'}}
                />

                <ListView dataSource={this.state.dataSource}
                          renderRow={(item) => this.renderRow(item)}
                          renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this.renderSeparator(sectionID, rowID, adjacentRowHighlighted)}
                          renderFooter={() => this.renderFooter()}
                          refreshControl={<RefreshControl
                              refreshing={this.state.isLoading}
                              onRefresh={() => this.onLoad()
                              }
                          />}
                />
                <Toast ref={toast => {
                    this.toast = toast
                }}/>
            </View>
        )
    }
}

const styles = StyleSheet.create(
    {
        container: {
            flex: 1,
        },

        boy_text: {
            fontSize: 18,
            color: 'black',
            alignSelf: 'center',
        },
        item_text: {
            fontSize: 16,
            color: 'black',
        },
        item_row: {
            height: 60
        },
        item_line: {
            height: 1,
            backgroundColor: '#aaa'
        },
        item_image: {
            height: 100,
            width: 200,
            tintColor: 'red',
            justifyContent: 'center',
            alignSelf: 'center',
        }
    }
)